<template>
    <!-- 登录弹窗 -->
    <div>
        <a-modal v-model:visible="modalVisible" title="登录" @ok="handleOk" ok-text="确认" cancel-text="取消">
            <a-radio-group v-model:value="loginType" :style="{ marginBottom: '8px' }">
                <a-radio-button value="pwdLogin">密码登录</a-radio-button>
                <a-radio-button value="secretKeyLogin">密钥登录</a-radio-button>
            </a-radio-group>

            <div class="pwdLogin instance-modal" v-show="loginType == 'pwdLogin'">
                <div class="flex pwdLogin-item">
                    <div>登录指令:</div>
                    <div>ssh -p ***** root@**********</div>
                    <a-button type="link" @click="onCopy(instance?.InstancePhysicalState?.toolsAttrsUrl?.ssh?.url)">
                        <template #icon>
                            <CopyOutlined />
                        </template>
                    </a-button>
                </div>
                <div class="flex pwdLogin-item">
                    <div>登录密码:</div>
                    <div>*********************</div>
                    <a-button type="link" @click="onCopy(instance?.InstancePhysicalState?.toolsAttrsUrl?.ssh?.passwd)">
                        <template #icon>
                            <CopyOutlined />
                        </template>
                    </a-button>
                </div>
            </div>

            <div class="secretKeyLogin instance-modal" v-show="loginType == 'secretKeyLogin'">
                <div>你还没有设置你的SSH密钥，使用密钥可以实现免密码登录，同时提高服务器登录认证安全性</div>
                <div>使用下列命令生成你的公钥/私钥对</div>
                <div class="fz-16 col-223354">ssh-keygen -t rsa -C "your.email@example.com" -b 4096
                    <a-button type="link" @click="onCopy1()">
                        <template #icon>
                            <CopyOutlined />
                        </template>
                    </a-button>
                </div>
                <div>你可以在账户中心添加你的公钥<a-button type="link" @click="router.push('/account')">去添加</a-button></div>
                <div><a-button type="link" @click="goDocs">了解更多</a-button>关于SSH密钥如何生成和使用</div>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';
import clipboard3 from "vue-clipboard3";
import {
    CopyOutlined,
} from '@ant-design/icons-vue';
import { XsyMessage } from '@/libs/util.toast'
import { useRouter } from 'vue-router'
const router = useRouter()

// 复制功能
const { toClipboard } = clipboard3();
const onCopy = async (key) => {
    try {
        await toClipboard(key);
        XsyMessage.success("复制成功");
    } catch (e) {
        console.error(e);
    }
}

const onCopy1 = async () => {
    try {
        await toClipboard('ssh-keygen -t rsa -C "your.email@example.com" -b 4096');
        XsyMessage.success("复制成功");
    } catch (e) {
        console.error(e);
    }
}

// 登录方式 
const loginType = ref('pwdLogin')

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
    instance: {
        type: Object,
        default: {}
    }
});

const emit = defineEmits(['update:modelValue']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});
// 确定按钮的回调
const handleOk = () => {
    emit('update:modelValue', false)
};

// 密钥登录实例
function goDocs() {
    window.open(window.location.origin + '/docs/help_document/practice/ssh-conect-gpumall/#使用-ssh-密钥登录实例', '_blank')
}

</script>

<style scoped lang="less">
.pwdLogin-item {
    align-items: center;
}


.instance-modal {
    font-size: 14px;
    color: #646F87;

    &>div {
        margin-bottom: 8px;
    }
}
</style>

